<template>
  <div class="container">
    <div class="chart-container">
      <div class="reviewNum">
        <el-radio-group v-model="reviewNumType">
          <el-radio-button label="today">今日</el-radio-button>
          <el-radio-button label="all">全部</el-radio-button>
        </el-radio-group>
        <div id="reviewNum" class="chart"></div>
      </div>
      <div id="reviewEveryDay" class="chart"></div>
      <div id="reviewReviewer" class="chart" v-if="this.type == 4"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { mapState } from 'vuex';

export default {
  data() {
    return {
      message: '工作概览',
      reviewNumChart: null,
      reviewNumType: 'today',
      reviewEveryDayChart: null,
      reviewReviewerChart: null,
      reviewNumChartOption: {},
      reviewEveryDayChartOption: {},
      reviewReviewerChartOption: {},
      dates: [],
    };
  },

  watch: {
    reviewNumChartOption: {
      handler() {
        consol;
        this.getReviewNumChartOption();
      },
      deep: true,
    },
    reviewEveryDayChartOption: {
      handler() {
        this.getReviewEveryDayChartOption();
      },
      deep: true,
    },
    reviewReviewerChartOption: {
      handler() {
        this.getReviewReviewerChartOption();
      },
      deep: true,
    },
  },

  computed: {
    ...mapState('review', ['reviewList', 'total', 'finish', 'reviewerList']),

    ...mapState('user', ['id', 'type']),

    reviewers() {
      return this.setReviewers();
    },
    option1() {
      return {
        title: {
          text: '审核一览', // 添加标题文本
          left: 'center',
          textStyle: {
            color: '#333',
            fontSize: 18,
            fontWeight: 'bold',
          },
        },
        color: [
          '#87CEEB',
          // '#97ed34',
          '#FF4500',
        ],
        legend: {
          orient: 'vertical',
          right: 10,
          bottom: '10',
        },
        series: [
          {
            name: 'Review Form',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2,
            },
            label: {
              show: true,
              position: 'inside', // 标签位置，可以设置为 'outside' 或 'inside'
              formatter: '{c} ({d}%)',
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 15,
                fontWeight: 'bold',
              },
            },
            labelLine: {
              show: true,
            },
            data: [
              {
                value: this.$store.state.review.todayFinish,
                name: '今日已审核',
              },
              // { value: this.$store.state.review.finish, name: '已审核' },
              {
                value: this.total - this.finish,
                name: '未审核',
              },
              ``,
            ],
          },
        ],
      };
    },
    option4() {
      return {
        title: {
          text: '审核一览', // 添加标题文本
          left: 'center',
          textStyle: {
            color: '#333',
            fontSize: 18,
            fontWeight: 'bold',
          },
        },
        color: [
          // '#87CEEB',
          '#97ed34',
          '#FF4500',
        ],
        legend: {
          orient: 'vertical',
          right: 10,
          bottom: '10',
        },
        series: [
          {
            name: 'Review Form',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2,
            },
            label: {
              show: true,
              position: 'inside', // 标签位置，可以设置为 'outside' 或 'inside'
              formatter: '{c} ({d}%)',
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 15,
                fontWeight: 'bold',
              },
            },
            labelLine: {
              show: true,
            },
            data: [
              { value: this.$store.state.review.finish, name: '已审核' },
              {
                value:
                  this.$store.state.review.total -
                  this.$store.state.review.finish,
                name: '未审核',
              },
              ``,
            ],
          },
        ],
      };
    },

    option2() {
      return {
        title: {
          text: '近七日审核数量统计',
          left: 'center',
          textStyle: {
            color: '#333',
            fontSize: 18,
            fontWeight: 'bold',
          },
        },
        grid: {
          left: '5%', // 调整左边距
          right: '5%', // 调整右边距
          bottom: '8%', // 调整底边距
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          data: this.dates,
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: this.$store.state.review.reviewNumSeven,
            type: 'line',
            lineStyle: {
              width: 3, // 线条宽度
              color: '#ff6600', // 线条颜色
            },
            symbolSize: 8, // 点的大小
          },
        ],
      };
    },
    option3() {
      return {
        title: {
          text: '员工审核数量统计',
          left: 'center',
          textStyle: {
            color: '#333',
            fontSize: 18,
            fontWeight: 'bold',
          },
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            data: this.reviewers.reviewers,
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
          },
        ],
        series: [
          {
            name: 'Direct',
            type: 'bar',
            barWidth: '60%',
            data: this.reviewers.reviewerNum,
          },
        ],
      };
    },
  },

  watch: {
    reviewNumType() {
      if (this.reviewNumType === 'today') {
        this.reviewNumChart.setOption(this.option1);
      } else {
        this.reviewNumChart.setOption(this.option4);
      }
    },
  },
  async mounted() {
    console.log('overview的mounted触发');
    if (this.type == 4) {
      await this.$store.dispatch('review/fetchStaticAll', {});
    } else {
      await this.$store.dispatch('review/fetchStatic', { reviewId: this.id });
    }

    this.dates = await this.setXAxis();

    this.reviewNumChart = echarts.init(document.getElementById('reviewNum'));
    console.log('准备setOption');
    this.reviewNumChart.setOption(this.option1);

    this.reviewEveryDayChart = echarts.init(
      document.getElementById('reviewEveryDay')
    );
    this.reviewEveryDayChart.setOption(this.option2);

    if (this.type == 4) {
      this.reviewReviewerChart = echarts.init(
        document.getElementById('reviewReviewer')
      );
      this.reviewReviewerChart.setOption(this.option3);
    }
    console.log('overview的mounted结束');
  },
  beforeDestroy() {},
  methods: {
    getReviewNumChartOption() {
      console.log('刷新时重置画布');
      this.reviewNumChart.clear();
      this.reviewNumChart.setOption(this.reviewNumChartOption);
      window.onresize = this.reviewNumChartOption.resize;
      console.log('重置成功');
    },

    getReviewEveryDayChartOption() {},

    getReviewReviewerChartOption() {},

    formatDate(date) {
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始，需要+1
      const day = date.getDate().toString().padStart(2, '0');

      return `${year}-${month}-${day}`;
    },

    setXAxis() {
      const today = new Date(); // 获取当前日期
      const pastSevenDays = [];

      for (let i = 7; i >= 1; i--) {
        const currentDate = new Date(today);
        currentDate.setDate(today.getDate() - i);
        pastSevenDays.push(this.formatDate(currentDate)); // 格式化日期并添加到数组中
      }
      return pastSevenDays;
    },

    setReviewers() {
      const reviewersList = this.$store.state.review.reviewerList;
      const reviewers = [];
      const reviewNum = [];
      for (const review of reviewersList) {
        reviewers.push(review.username);
        reviewNum.push(review.reviewNum);
      }
      console.log(reviewers);
      console.log(reviewNum);
      return { reviewers: reviewers, reviewerNum: reviewNum };
    },
  },
};
</script>

<style scoped>
body {
  background-color: aliceblue;
}
.container {
  /* background-image:url('~@/assets/images/review_back.jpg'); */
  margin-top: 50px; /* 调整整体位置 */
}
.chart-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* 间隔调整 */
  justify-content: center;
}

.el-radio-button {
  margin-bottom: 15px;
}

.el-radio-group {
  margin-left: 40px;
  /* border-color: cornflowerblue; */
  fill: rgb(64, 239, 207);
}
.reviewNum {
  background-color: white;
  width: 600px; /* 设置宽度 */
  height: 450px; /* 设置高度 */
  margin: 10px; /* 设置间距 */
  border-radius: 10px; /* 设置圆角 */
  border: 2px solid #ccc; /* 设置边框 */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 设置阴影效果 */
  display: flex;
  align-items: center; /* 纵向居中对齐 */
}

#reviewNum {
  width: 500px; /* 设置宽度 */
  height: 450px; /* 设置高度 */
  margin: auto;
}

#reviewEveryDay {
  background-color: white;
  width: 600px; /* 设置宽度 */
  height: 450px; /* 设置高度 */
  margin: 10px; /* 设置间距 */
  border-radius: 10px; /* 设置圆角 */
  border: 2px solid #ccc; /* 设置边框 */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 设置阴影效果 */
}
#reviewReviewer {
  margin: 10px auto;
  display: flex;
  background-color: white;
  width: 1250px; /* 设置宽度 */
  height: 450px; /* 设置高度 */
  margin: 10px; /* 设置间距 */
  border-radius: 10px; /* 设置圆角 */
  border: 2px solid #ccc; /* 设置边框 */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
</style>
